<template>
  <div class="tag_detail">
    
    <div class="common_bg"></div>


    <div class="container">
      <ul class="tag_list">
        <li class="tag_item" @click.stop="showCloseIcon(item)" v-for="(item, index) in studentTagList" :key="index">
          <i v-if="item.close" @click.stop="deleteTag(item, index)" class="icon_close"></i>
          <span>{{item.labelManagementName}}</span>
        </li>
      </ul>

      

      <div class="all_tag_box">
        <div class="tag_title">
          <i class="icon_label"></i>
          <span>全部标签</span>
        </div>

        <ul class="tag_class">
          <li class="class_item"
            @click="toTagClass(item)"
            v-for="(item, index) in tagList" :key="index"
            ><span>{{item.labelManagementName}}</span></li>
        </ul>

        <!-- <van-checkbox-group v-model="checkedCustomList">
          <ul class="custon_tag_list">
            <li class="item"
              v-for="(item, index) in customTagList" 
              :class="{'activeItem': checkedList.indexOf(item.labelManagementId) > -1} " 
              :key="index">
                <van-checkbox :name="item.labelManagementId">{{item.labelManagementName}}</van-checkbox>
            </li>
          </ul>
        </van-checkbox-group> -->
        <ul class="custom_tag_list">
          <li 
            class="item"  
            :class="{active: item.checked}" 
            @click="checkTag(item)"
            v-for="(item, index) in customTagList"
            :key="index">
            <span>{{item.labelManagementName}}</span>
          </li>
        </ul>

        <div @click="showAddPop = true;" class="add_class_tag">
          添加标签
        </div>
      </div>
    </div>

    <div class="icon_place" @click="submit"></div>

    <van-popup v-model="showTagClassList" class="" position="right" :style="{ height: '100%', width: '100%', background: '#F7F9FF' }">
      <div class="top_bar pop_top_bar">
        <span class="icon_left" @click="showTagClassList = false; parentId = 0"></span> 
        <span class="title">{{tagClassLabel}}</span> 
        <span @click="save">完成</span>
      </div>
        <van-checkbox-group v-model="checkedList">
          <ul class="tag_class_list_box">
            <li class="tag_class_item"
              v-for="(item, index) in tagClassList" 
              :class="{'activeItem': checkedList.indexOf(item.labelManagementId) > -1} " 
              :key="index">
                <van-checkbox :name="item.labelManagementId">{{item.labelManagementName}}</van-checkbox>
            </li>
            <li @click="showAddPop = true; newTagName = '' " class="tag_class_item add_class_item">添加</li>
          </ul>
        </van-checkbox-group>
    </van-popup>


    <van-dialog
      v-model="showAddPop"
      title="添加标签"
      show-cancel-button
      :beforeClose="beforeCloseDialog"
      class="dialog"
    >
      <van-field v-model="newTagName" placeholder="请输入" />
    </van-dialog>

  </div>
</template>

<style>

.tag_detail .van-checkbox {
  position: relative;
  height: 100%;
  width: 100%;
}
.tag_detail .van-checkbox__icon {
  height: 100%;
  width: 100%;
}
.tag_detail .van-checkbox__icon--checked .van-icon{
  background-color: #FF9853;
  border-color: #FF9853;
  height: 100%;
  width: 100%;
  display: inline-block;
}
.tag_detail  .van-checkbox__icon .van-icon {
  height: 100%;
  width: 100%;
  border: 1px dashed #FF9853;
}
.tag_detail .van-checkbox__label {
  position: absolute;
  white-space: nowrap;
  float: left;
  left: 50%;
  top: 50%;
  width: auto;
  font-size: .373333rem;
  color: #FF9853;
  transform: translate(-50%, -50%);
  margin-left: 0;
  text-align: center;
  display: inline-block;
  padding: 0 .4rem;
}
.tag_detail .van-checkbox__icon--checked .van-checkbox__label {
  color: #fff;
}
.tag_detail  .van-icon-success:before {
  content: '' !important;
}

.tag_detail .activeItem .van-checkbox__label {
  color: #fff;
}
.tag_detail .van-checkbox__icon--round .van-icon {
  border-radius: .533333rem;
}
</style>
<style scoped>

.custom_tag_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.custom_tag_list li {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #FE6161;
  border-radius: .533333rem;
  margin-bottom: .266667rem;
  height: .8rem;
}
.custom_tag_list li.active {
  background: #FE8697;
  border: 1px solid #FE8697;
}
.custom_tag_list li.active span {
  color: #fff;
}
.custom_tag_list li span {
  font-size: 14px;
  color: #FE6161;
  width: auto;
  padding: .053333rem .533333rem;
  box-sizing: border-box;
}

.container {
  padding: 0;
}
.common_bg{
  height: 6.7rem;
}

.tag_detail .tag_list {
  display: flex;
  padding: 0 .866667rem;
  box-sizing: border-box;
  flex-wrap: wrap;
  min-height: 1.066667rem;
}
.tag_detail .tag_list li {
  height: .666667rem;
  background: #fff;
  border-radius: .133333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .32rem;
  padding: 0 .333333rem;
  margin-right: .48rem;
  margin-top: .4rem;
  position: relative;
}

.tag_detail .all_tag_box {
  min-height: 9.826667rem;
  background: #fff;
  border-radius:.6rem .6rem 6px 6px;
  margin-top: .493333rem;
  padding: 0 .693333rem;
  padding-bottom: .4rem;
}
.tag_detail .tag_title {
  display: flex;
  align-items: center;
  padding: .266667rem 0;
  border-bottom: .5px solid #E8E8E8;
}
.tag_detail .icon_label {
  display: inline-block;
  height: .573333rem;
  width: .573333rem;
  background: url('../../../assets/img/icon_label.png') 0 0 no-repeat;
  background-size: 100%;
}
.tag_detail .tag_title span {
  font-size: .426667rem;
  color: #FE8697;
  margin-left: .266667rem
}

.tag_detail .tag_class {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: .533333rem;
}
.tag_detail .class_item {
  min-width: 2.333333rem;
  height: .8rem;
  background: #FFE2DC;
  color: #FD754D;
  border-radius:.533333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .373333rem;
  position: relative;
  margin-bottom: .6rem;
}
.tag_detail .class_item span {
  display: inline-block;
  padding: 0 .8rem;
}
.tag_detail .class_item::after {
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

.tag_detail .tag_class_list_box { display: flex; padding: .4rem .266667rem; flex-wrap: wrap; }
.tag_detail .tag_class_list_box .tag_class_item { 
  display: flex; 
  justify-content: center; 
  align-items: center;
  min-width: 2.333333rem;
  height: .8rem;
  font-size: .373333rem;
  color: #FD754D;
  background: #FFE2DC;
  border-radius: .533333rem;
  margin-right: .4rem;
  margin-bottom: .6rem;
}
.tag_detail .icon_close {
  position: absolute;
  right: -0.133333rem;
  top: -0.066667rem
}

.tag_detail .add_class_tag {
  width: 1.866667rem;
  height: .76rem;
  border: 1px dashed rgba(224,32,32,1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FE6161;
  font-size: .32rem;
  margin: 1.333333rem auto;
}
.tag_detail .add_class_item {
  background: #fff !important;
  border: .5px solid #FD754D;
}
</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("tagDetail");


export default {
  name: 'tagDetail',
  data() {
    return {
      jwtAuth: {},
      showTagClassList: false,
      showAddPop: false,
      newTagName: '',
      tagClassLabel: 'A类',
      parentId: '',
      checkedList: [],
      checkedCustomList: [],
      tagList: [],    // 大类标签
      tagClassList: [],  // 子类标签
      studentTagList: [ // 学员标签
      ],
      copyStudentTagList: [],
      studentInfo: {},
      allTagList: [],
      customTagList: [],
    }
  },
  created() {
    this.queryAllTag();
    this.initStudentTag();
    this.initClassData();
  },
  mounted() {
   
  },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    initStudentTag() {
      this.formGet({
        API: 'selectById',
        data: {
          id: this.$route.params.id
        }
      }).then(res => {
        this.studentInfo = res;
        this.studentTagList = res.bmStudentLabelList;
        this.copyStudentTagList = res.bmStudentLabelList;
        this.checkedList = [];
        this.studentTagList.forEach(item => {
          item.close = false;
          this.checkedList.push(item.labelManagementId)
        })
        console.log(this.studentTagList)
        this.initCustomTag();
      })
    },

    initClassData(item) {
      let parentId = 0
      console.log(item)
      if(item) {
        parentId = item.labelManagementId
        this.parentId = item.labelManagementId
      }else{
        parentId = 0;
      }

      console.log(parentId)
      this.formGet({
        API: 'selectByParentId',
        data: {
          parentId: parentId
        }
      }).then(res => {
        if(item) {
          this.tagClassList = res;
        }else{
          this.tagList = res;
        }
      })
    },

    initCustomTag() {
      this.post({
        API: 'queryCustomLabel',
        data: {}
      }).then(res => {
        for(let i=0; i<res.length; i++) {
          for(let k=0; k<this.studentTagList.length; k++) {
            if(this.studentTagList[k].labelManagementId == res[i].labelManagementId) {
              res[i].checked = true;
              break;
            }else{
              res[i].checked = false;
            }
          }
        }
        this.customTagList = res;
        // console.log(this.customTagList)
      })
    },

    checkTag(item) {
      item.checked = !item.checked;
      console.log(item);
      if(item.checked) {
        this.studentTagList.push(item);
      }else{
        this.studentTagList.forEach((studentTagitem, index) => {
          if(studentTagitem.labelManagementId == item.labelManagementId) {
            this.studentTagList.splice(index, 1)
          }
        })
      }
    },

    addTag() {
      console.log(this.parentId)
      let remark = ''

      this.parentId == 0 ? remark = 'flag' : remark = '';
      // console.log(this.parentId)
      // console.log(remark)
      let data = {
        parentId: this.parentId || 0,
        labelManagementName: this.newTagName,
        remark: remark,
      }
      this.post({
        API: 'insert',
        data: data
      }).then(res => {
        this.queryAllTag();
        this.$notify({ type: 'success', message: '新增成功',duration: 1200 });
        let item = {
          labelManagementId: this.parentId
        }
        if(this.parentId == 0) {
          this.initCustomTag();
        }else{
          this.initClassData(item);
        }
      }).catch(err => {
        this.$toast.fail(err);
      })
    },
    beforeCloseDialog(action, done) {
      if (action === 'confirm') {
        if(this.newTagName == '') {
          done()
        }else{
          this.addTag();
          
        }
        done();
      } else {
        done();
      }
    },

    toTagClass(item) {
      this.parentId = item.labelManagementId
      this.tagClassLabel = item.labelManagementName;
      this.showTagClassList = true;
      this.initClassData(item)
    },
    showCloseIcon(item) {
      item.close = !item.close
      this.$forceUpdate();
    },
    deleteTag(item, index) {
      console.log(item);
      // return false;
      this.checkedList.forEach((checkItem, checkIndex) => {
        if(checkItem == item.labelManagementId) {
          this.checkedList.splice(checkIndex, 1)
        }
      })
      this.studentTagList.splice(index, 1)

      this.customTagList.forEach(custonItem => {
        if(item.labelManagementId == custonItem.labelManagementId) {
          custonItem.checked = false;
        }
      })
    },

    save() {
      console.log(this.checkedList);
      this.parentId = 0;
      this.showTagClassList = false;

      // this.studentTagList = this.copyStudentTagList.concat();
      this.studentTagList = []
      for(let i=0; i<this.checkedList.length; i++) {
        for(let k=0; k<this.allTagList.length; k++) {
          if(this.checkedList[i] == this.allTagList[k].labelManagementId) {
            let obj = {
              close: false,
              labelManagementName: this.allTagList[k].labelManagementName,
              labelManagementId: this.allTagList[k].labelManagementId,
            }

            this.studentTagList.push(obj);
            break;
          }
        };
      };

      console.log(this.studentTagList);

      this.customTagList.forEach(item => {
        if(item.checked) {
          let obj = {
            close: false,
            labelManagementName: item.labelManagementName,
            labelManagementId: item.labelManagementId,
          }

          if(this.checkedList.indexOf(item.labelManagementId) < 0) {
            this.studentTagList.push(obj);
          }
        }
      })

    },

    submit() {
      console.log(this.checkedList);
      let data = {};
      Object.assign(data, this.studentInfo);
      data.bmStudentLabelList = [];

      this.studentTagList.forEach(item => {
        // console.log(item)
        item.studentId = this.$route.params.id;
      })

      data.bmStudentLabelList = this.studentTagList;

      console.log(data)
      // return false;

      this.post({
        API: 'update',
        data: data
      }).then(res => {
        this.$notify({ type: 'success', message: '添加成功',duration: 1200 });
        this.$router.push({
          name: 'studentDetail',
          params: {
            id: this.$route.params.id
          }
        })
      })
      
    },

    queryAllTag() {
      this.post({
        API: 'selectBmLabelManagementPageList',
        data: {}
      }).then(res => {
        this.allTagList = res;
      })
    },
    
    
  },
  computed: {
    ...mapState([
    ]),
   
  },
  components: {
  },
}

</script>